Desplegar aplicacion Angular

Pasos a seguir para desplegar una aplicación Spring-boot web en Azure usando maven

Video explicacion: https://www.youtube.com/watch?v=9PTFz_hTEpU

Para desplegar una aplicación de Angular manualmente en azure seguimos los siguientes pasos:

• Hacemos un build de la aplicación Angular.
• Creamos un almacenamiento en Azure y activamos "static website".
• Subimos los archivos de la aplicación Angular al amacenamiento.

Build App Angular

Para hacer una build de nuestra aplicación lanzamos el siguiente comando, desde la carpeta de la applicación:

ng build

Tambien podemos usar este comando (este comando lo tendremos que usar al crear la pipeline):

npm run build

Como resultado dentro de la carpeta dist se generará una carpeta con todos los archivos de nuestra applicación listos para ser desplegados:

Almacenamiento Azure

Primero creamos una Storage Account, desde la página principal del Azure Portal nos vamos a More Servides:

Seleccionamos Storage Accounts de entre todos los servicios:

Creamos un nuevo Storage:

Le damos un nombre único y le damos a Review:

En la siguiente pantalla le damos a Create y el recurso se creará (puede tardar unos segundos en crearse...)

Una vez creado el recurso accedemos a el y en el apartado static website lo marcamos como Enabled:

En el apartado de index document indicamos index.html y le damos a Save:

Una vez le damos a Save en el mismo apartado se nos mostrará la dirección con la que podemos acceder a la web:

Ahora solo nos queda subir los archivos al almacenamiento, nos vamos al apartado Containers y despues elegimos $web (Este contenedor se crea al activar static website):

Hacemos click en la opción Upload:

Y seleccionamos todos los archivos que se generaron con el comando ng build:

Una vez subidos los archivos, entramos en la dirección que figura en el apartado Static website y veremos nuestra aplicación Angular desplegada:

Primero creamos un repositorio en Azure Devops y subimos el código de nuestra aplicación Angular.

Creamos una nueva pipeline desde Azure Devops:

Indicamos que queremos usar el editor antiguo:

Indicamos el repositorio que creamos previamente:

Indicamos que queremos empezar con un Empty job:

Creación pipeline de integración (CI)

Añadimos una tarea de npm a la pipeline:

está tarea ejecutará npm install para instalar todos los paquetes de package.json:

Volvemos a añadir una tarea de npm:

En este caso modificaremos la tarea para que realice la build de nuestra aplicación, le indicamos un nombre, en Command indicamos custom, y en Command and Arguments indicamos run build (el comando resultante de esta tarea será "npm run build"):

Ahora a mayores añadimos una tarea de Publish build artifact:

En Path to publish indicamos $(System.DefaultWorkingDirectory)\dist, esta variable hace referencia a la carpeta dist donde se genera la build de nuestro proyecto de angular.

Hacemos click en Save:

Indicamos un comentario para guardarlo:

Le damos a Queue:

Y ejecutamos la pipeline dandole a Run:

Si al ejecutar la pipeline obtenemos el siguiente error tenemos que rellenar el formulario del enlace (tarda entre 1-3 días):

##[error]No hosted parallelism has been purchased or granted. To request a free parallelism grant, please fill out the following form https://aka.ms/azpipelines-parallelism-request

Podemos volver a ejecutar una pipeline desde la sección de pipelines:

Una vez se está ejecutando la pipeline podemos ver el estado haciendo click aquí:

Aqui podemos ver todas las tareas que hace la pipeline y su salida:

Una vez terminada la ejecución de la pipeline podemos ver los artefactos publicados haciendo click aquí:

Aquí podemos ver todos los archivos que se han generado como resultado de la pipeline y que están listos para ser desplegados mediante una pipeline de despliegue (CD):

Creación pipeline de despliegue (CD)

Azure | Deploy